<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>百货电商APP</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4D4F',
                        secondary: '#FF7A45',
                        tertiary: '#FAAD14',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        };
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
          .content-auto {
              content-visibility: auto;
          }
          .scrollbar-hide {
              -ms-overflow-style: none;
              scrollbar-width: none;
          }
          .scrollbar-hide::-webkit-scrollbar {
              display: none;
          }
          .text-shadow {
              text-shadow: 0 2px 4px rgba(0,0,0,0.1);
          }
          .card-shadow {
              box-shadow: 0 4px 12px rgba(0,0,0,0.05);
          }
      }
    </style>
</head>

<body class="bg-gray-50 font-sans text-dark">
    <!-- 顶部导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300" id="header">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fas fa-bars text-xl text-gray-700"> </i>
                <h1 class="text-xl font-bold text-primary">百货优选</h1>
            </div>
            <div class="flex items-center space-x-4">
                <a href="javascript:void(0);" class="text-gray-700 hover:text-primary transition-colors">
                    <i class="fas fa-user-circle text-xl"> </i>
                </a>
                <a href="javascript:void(0);" class="text-gray-700 hover:text-primary transition-colors relative">
                    <i class="fas fa-shopping-cart text-xl"> </i>
                    <span
                        class="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                        3
                    </span>
                </a>
            </div>
        </div>
    </header>
    <!-- 主内容区 -->
    <main class="pt-16 pb-20">
        <!-- 搜索框 -->
        <div class="container mx-auto px-4 py-3">
            <div class="relative">
                <input type="text" placeholder="搜索商品、品牌、品类"
                    class="w-full py-3 px-4 pl-10 pr-12 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all" />
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                </i>
                <a href="javascript:void(0);"
                    class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary transition-colors">
                    <i class="fas fa-microphone"> </i>
                </a>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="relative overflow-hidden h-48 md:h-64" id="carousel">
            <div class="flex transition-transform duration-500 ease-out h-full" id="carousel-inner">
                <div class="min-w-full h-full">
                    <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/e16fc592663860c82339b2ee400ea248.png"
                        alt="热门商品推荐" class="w-full h-full object-cover" />
                </div>
                <div class="min-w-full h-full">
                    <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/953ca5a6afdbc0da61dde37ada3f67db.png"
                        alt="季节性促销" class="w-full h-full object-cover" />
                </div>
                <div class="min-w-full h-full">
                    <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/6f548a093f0db9a78bfe7eeb7f23722a.png"
                        alt="限时特惠" class="w-full h-full object-cover" />
                </div>
            </div>
            <!-- 轮播指示器 -->
            <div class="absolute bottom-3 left-0 right-0 flex justify-center space-x-2">
                <button class="w-2.5 h-2.5 rounded-full bg-white opacity-100 carousel-indicator active"
                    data-index="0"></button>
                <button class="w-2.5 h-2.5 rounded-full bg-white opacity-50 carousel-indicator" data-index="1"></button>
                <button class="w-2.5 h-2.5 rounded-full bg-white opacity-50 carousel-indicator" data-index="2"></button>
            </div>
        </div>
        <!-- 分类导航 -->
        <div class="bg-white py-4">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-5 gap-3">
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2 group-hover:bg-primary/20 transition-colors">
                            <i class="fas fa-shopping-bag text-primary text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 全部商品 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center mb-2 group-hover:bg-secondary/20 transition-colors">
                            <i class="fas fa-tshirt text-secondary text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 服饰鞋包 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-tertiary/10 flex items-center justify-center mb-2 group-hover:bg-tertiary/20 transition-colors">
                            <i class="fas fa-apple-alt text-tertiary text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 生鲜食品 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2 group-hover:bg-blue-200 transition-colors">
                            <i class="fas fa-home text-blue-500 text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 家居生活 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-2 group-hover:bg-purple-200 transition-colors">
                            <i class="fas fa-gift text-purple-500 text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 礼品专区 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2 group-hover:bg-green-200 transition-colors">
                            <i class="fas fa-medkit text-green-500 text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 健康护理 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mb-2 group-hover:bg-pink-200 transition-colors">
                            <i class="fas fa-utensils text-pink-500 text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 美食酒水 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-2 group-hover:bg-yellow-200 transition-colors">
                            <i class="fas fa-mobile-alt text-yellow-500 text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 数码家电 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-2 group-hover:bg-red-200 transition-colors">
                            <i class="fas fa-child text-red-500 text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 母婴用品 </span>
                    </a>
                    <a href="javascript:void(0);" class="flex flex-col items-center group">
                        <div
                            class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-2 group-hover:bg-gray-200 transition-colors">
                            <i class="fas fa-ellipsis-h text-gray-500 text-xl"> </i>
                        </div>
                        <span class="text-xs text-gray-700"> 更多分类 </span>
                    </a>
                </div>
            </div>
        </div>
        <!-- 限时特惠 -->
        <div class="bg-white mt-4 p-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold flex items-center">
                    <span class="inline-block w-2 h-6 bg-primary mr-2 rounded"> </span>
                    限时特惠
                </h2>
                <a href="javascript:void(0);" class="text-sm text-primary flex items-center">
                    查看全部
                    <i class="fas fa-angle-right ml-1"> </i>
                </a>
            </div>
            <div class="relative">
                <div class="flex space-x-1 overflow-x-auto scrollbar-hide pb-2" id="flash-sale-container">
                    <div class="min-w-[80px] bg-gray-100 rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-primary">08</div>
                        <div class="text-xs text-gray-500">小时</div>
                    </div>
                    <div class="min-w-[10px] flex items-center justify-center">
                        <div class="w-1 h-1 bg-gray-400 rounded-full"></div>
                        <div class="w-1 h-1 bg-gray-400 rounded-full mt-1"></div>
                    </div>
                    <div class="min-w-[80px] bg-gray-100 rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-primary">30</div>
                        <div class="text-xs text-gray-500">分钟</div>
                    </div>
                    <div class="min-w-[10px] flex items-center justify-center">
                        <div class="w-1 h-1 bg-gray-400 rounded-full"></div>
                        <div class="w-1 h-1 bg-gray-400 rounded-full mt-1"></div>
                    </div>
                    <div class="min-w-[80px] bg-gray-100 rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-primary">45</div>
                        <div class="text-xs text-gray-500">秒</div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-3 gap-3 mt-4">
                <a href="javascript:void(0);" class="group">
                    <div class="relative overflow-hidden rounded-lg mb-2">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/84cc588686ae43d0b896b08eae1df364.png"
                            alt="特惠商品"
                            class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                        <div class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded">
                            2折
                        </div>
                    </div>
                    <h3 class="text-sm font-medium line-clamp-2 h-10">
                        无线蓝牙耳机 高清音质
                    </h3>
                    <div class="flex items-center mt-1">
                        <span class="text-primary font-bold"> ¥59 </span>
                        <span class="text-xs text-gray-400 line-through ml-1">
                            ¥299
                        </span>
                    </div>
                </a>
                <a href="javascript:void(0);" class="group">
                    <div class="relative overflow-hidden rounded-lg mb-2">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/82fd1ee4c44d2277540ab416fed35350.png"
                            alt="特惠商品"
                            class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                        <div class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded">
                            3折
                        </div>
                    </div>
                    <h3 class="text-sm font-medium line-clamp-2 h-10">
                        不锈钢锅具套装 家用厨房必备
                    </h3>
                    <div class="flex items-center mt-1">
                        <span class="text-primary font-bold"> ¥89 </span>
                        <span class="text-xs text-gray-400 line-through ml-1">
                            ¥269
                        </span>
                    </div>
                </a>
                <a href="javascript:void(0);" class="group">
                    <div class="relative overflow-hidden rounded-lg mb-2">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/ba4677d8f714e5dff883980756471911.png"
                            alt="特惠商品"
                            class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                        <div class="absolute top-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded">
                            5折
                        </div>
                    </div>
                    <h3 class="text-sm font-medium line-clamp-2 h-10">
                        纯棉T恤 夏季新款
                    </h3>
                    <div class="flex items-center mt-1">
                        <span class="text-primary font-bold"> ¥39 </span>
                        <span class="text-xs text-gray-400 line-through ml-1"> ¥79 </span>
                    </div>
                </a>
            </div>
        </div>
        <!-- 热门推荐 -->
        <div class="bg-white mt-4 p-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold flex items-center">
                    <span class="inline-block w-2 h-6 bg-secondary mr-2 rounded">
                    </span>
                    热门推荐
                </h2>
                <a href="javascript:void(0);" class="text-sm text-primary flex items-center">
                    更多
                    <i class="fas fa-angle-right ml-1"> </i>
                </a>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <a href="javascript:void(0);" class="group">
                    <div class="relative overflow-hidden rounded-lg mb-2">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/d6d974a97b0c81d91d720979d4a11c03.png"
                            alt="热门商品"
                            class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                    </div>
                    <h3 class="text-sm font-medium line-clamp-2 h-10">
                        智能手表 多功能运动监测
                    </h3>
                    <div class="flex items-center mt-1">
                        <span class="text-primary font-bold"> ¥199 </span>
                        <div class="ml-auto flex items-center">
                            <i class="fas fa-star text-yellow-400 text-xs"> </i>
                            <span class="text-xs text-gray-500 ml-1"> 4.8 </span>
                        </div>
                    </div>
                </a>
                <a href="javascript:void(0);" class="group">
                    <div class="relative overflow-hidden rounded-lg mb-2">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/42e23716d72c73a982d5f8eb1876a2cc.png"
                            alt="热门商品"
                            class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                    </div>
                    <h3 class="text-sm font-medium line-clamp-2 h-10">
                        补水面膜 保湿提亮肤色
                    </h3>
                    <div class="flex items-center mt-1">
                        <span class="text-primary font-bold"> ¥69 </span>
                        <div class="ml-auto flex items-center">
                            <i class="fas fa-star text-yellow-400 text-xs"> </i>
                            <span class="text-xs text-gray-500 ml-1"> 4.9 </span>
                        </div>
                    </div>
                </a>
                <a href="javascript:void(0);" class="group">
                    <div class="relative overflow-hidden rounded-lg mb-2">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/4784c56e73824f87e093f96c64b6ce81.png"
                            alt="热门商品"
                            class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                    </div>
                    <h3 class="text-sm font-medium line-clamp-2 h-10">
                        空气净化器 家用卧室静音
                    </h3>
                    <div class="flex items-center mt-1">
                        <span class="text-primary font-bold"> ¥399 </span>
                        <div class="ml-auto flex items-center">
                            <i class="fas fa-star text-yellow-400 text-xs"> </i>
                            <span class="text-xs text-gray-500 ml-1"> 4.7 </span>
                        </div>
                    </div>
                </a>
                <a href="javascript:void(0);" class="group">
                    <div class="relative overflow-hidden rounded-lg mb-2">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/1cb3f39c4999a420b816429c1496156e.png"
                            alt="热门商品"
                            class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                    </div>
                    <h3 class="text-sm font-medium line-clamp-2 h-10">
                        多功能料理锅 家用无烟
                    </h3>
                    <div class="flex items-center mt-1">
                        <span class="text-primary font-bold"> ¥299 </span>
                        <div class="ml-auto flex items-center">
                            <i class="fas fa-star text-yellow-400 text-xs"> </i>
                            <span class="text-xs text-gray-500 ml-1"> 4.6 </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <!-- 新品上市 -->
        <div class="bg-white mt-4 p-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold flex items-center">
                    <span class="inline-block w-2 h-6 bg-tertiary mr-2 rounded"> </span>
                    新品上市
                </h2>
                <a href="javascript:void(0);" class="text-sm text-primary flex items-center">
                    全部新品
                    <i class="fas fa-angle-right ml-1"> </i>
                </a>
            </div>
            <div class="relative">
                <div class="flex space-x-4 overflow-x-auto scrollbar-hide pb-4" id="new-products-container">
                    <a href="javascript:void(0);" class="min-w-[160px] group">
                        <div class="relative overflow-hidden rounded-lg mb-2">
                            <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/68991e63e543d0d7fdbf75a9eb3bdb0a.png"
                                alt="新品"
                                class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                            <div class="absolute top-2 left-2 bg-tertiary text-white text-xs px-2 py-1 rounded">
                                新品
                            </div>
                        </div>
                        <h3 class="text-sm font-medium line-clamp-2 h-10">
                            便携式榨汁机 家用小型
                        </h3>
                        <div class="flex items-center mt-1">
                            <span class="text-primary font-bold"> ¥129 </span>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="min-w-[160px] group">
                        <div class="relative overflow-hidden rounded-lg mb-2">
                            <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/6cbf8a8c7ec591d695b6c357421b3a2a.png"
                                alt="新品"
                                class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                            <div class="absolute top-2 left-2 bg-tertiary text-white text-xs px-2 py-1 rounded">
                                新品
                            </div>
                        </div>
                        <h3 class="text-sm font-medium line-clamp-2 h-10">
                            夏季新款连衣裙 时尚印花
                        </h3>
                        <div class="flex items-center mt-1">
                            <span class="text-primary font-bold"> ¥159 </span>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="min-w-[160px] group">
                        <div class="relative overflow-hidden rounded-lg mb-2">
                            <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/21c644e2ae39a86649422defa5445032.png"
                                alt="新品"
                                class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                            <div class="absolute top-2 left-2 bg-tertiary text-white text-xs px-2 py-1 rounded">
                                新品
                            </div>
                        </div>
                        <h3 class="text-sm font-medium line-clamp-2 h-10">
                            北欧风台灯 卧室床头灯
                        </h3>
                        <div class="flex items-center mt-1">
                            <span class="text-primary font-bold"> ¥89 </span>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="min-w-[160px] group">
                        <div class="relative overflow-hidden rounded-lg mb-2">
                            <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/dca2773ce6af41be8f5b262995131181.png"
                                alt="新品"
                                class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-300" />
                            <div class="absolute top-2 left-2 bg-tertiary text-white text-xs px-2 py-1 rounded">
                                新品
                            </div>
                        </div>
                        <h3 class="text-sm font-medium line-clamp-2 h-10">
                            智能体脂秤 精准测量
                        </h3>
                        <div class="flex items-center mt-1">
                            <span class="text-primary font-bold"> ¥79 </span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 品牌专区 -->
        <div class="bg-white mt-4 p-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-bold flex items-center">
                    <span class="inline-block w-2 h-6 bg-blue-500 mr-2 rounded"> </span>
                    品牌专区
                </h2>
                <a href="javascript:void(0);" class="text-sm text-primary flex items-center">
                    更多品牌
                    <i class="fas fa-angle-right ml-1"> </i>
                </a>
            </div>
            <div class="grid grid-cols-4 gap-3">
                <a href="javascript:void(0);" class="flex flex-col items-center group">
                    <div
                        class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden group-hover:ring-2 group-hover:ring-blue-500 transition-all">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/8a56a8edd24fe757fb09bb513826d935.png"
                            alt="品牌" class="w-12 h-auto object-contain" />
                    </div>
                    <span class="text-xs text-gray-700"> 品牌A </span>
                </a>
                <a href="javascript:void(0);" class="flex flex-col items-center group">
                    <div
                        class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden group-hover:ring-2 group-hover:ring-blue-500 transition-all">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/b9a5dde2633f47427856e24f427fe4d1.png"
                            alt="品牌" class="w-12 h-auto object-contain" />
                    </div>
                    <span class="text-xs text-gray-700"> 品牌B </span>
                </a>
                <a href="javascript:void(0);" class="flex flex-col items-center group">
                    <div
                        class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden group-hover:ring-2 group-hover:ring-blue-500 transition-all">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/b73cda94593691002e2f9936f56e1688.png"
                            alt="品牌" class="w-12 h-auto object-contain" />
                    </div>
                    <span class="text-xs text-gray-700"> 品牌C </span>
                </a>
                <a href="javascript:void(0);" class="flex flex-col items-center group">
                    <div
                        class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden group-hover:ring-2 group-hover:ring-blue-500 transition-all">
                        <img src="https://design.gemcoder.com/staticResource/echoAiSystemImages/992f66243c37c814696b458d5d414fca.png"
                            alt="品牌" class="w-12 h-auto object-contain" />
                    </div>
                    <span class="text-xs text-gray-700"> 品牌D </span>
                </a>
            </div>
        </div>
    </main>
    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50">
        <div class="grid grid-cols-5 h-16">
            <a href="javascript:void(0);"
                class="flex flex-col items-center justify-center text-primary border-t-2 border-primary">
                <i class="fas fa-home text-lg"> </i>
                <span class="text-xs mt-1"> 首页 </span>
            </a>
            <a href="javascript:void(0);"
                class="flex flex-col items-center justify-center text-gray-500 hover:text-primary transition-colors">
                <i class="fas fa-compass text-lg"> </i>
                <span class="text-xs mt-1"> 发现 </span>
            </a>
            <a href="javascript:void(0);"
                class="flex flex-col items-center justify-center text-gray-500 hover:text-primary transition-colors">
                <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center -mt-4 shadow-lg">
                    <i class="fas fa-plus text-white text-xl"> </i>
                </div>
            </a>
            <a href="javascript:void(0);"
                class="flex flex-col items-center justify-center text-gray-500 hover:text-primary transition-colors">
                <i class="fas fa-shopping-cart text-lg"> </i>
                <span class="text-xs mt-1"> 购物车 </span>
            </a>
            <a href="javascript:void(0);"
                class="flex flex-col items-center justify-center text-gray-500 hover:text-primary transition-colors">
                <i class="fas fa-user text-lg"> </i>
                <span class="text-xs mt-1"> 我的 </span>
            </a>
        </div>
    </footer>
    <script>
        // 页面加载时初始化渲染
        document.addEventListener('DOMContentLoaded', function () {
            initCarousel();
            initHeaderScroll();
            initFlashSaleTimer();
        });
        // 轮播图初始化
        function initCarousel() {
            var carousel = document.getElementById('carousel');
            var carouselInner = document.getElementById('carousel-inner');
            var indicators = document.querySelectorAll('.carousel-indicator');
            var slides = carouselInner.children;
            var currentIndex = 0;
            var slideWidth = carousel.offsetWidth;
            var slideInterval;
            // 设置轮播图宽度
            function setSlideWidth() {
                slideWidth = carousel.offsetWidth;
                for (var i = 0; i < slides.length; i++) {
                    slides[i].style.width = slideWidth + 'px';
                }
                goToSlide(currentIndex);
            }
            // 跳转到指定幻灯片
            function goToSlide(index) {
                carouselInner.style.transform = "translateX(-".concat(index * slideWidth, "px)");

                // 更新指示器状态
                indicators.forEach(function (indicator, i) {
                    if (i === index) {
                        indicator.classList.add('opacity-100');
                        indicator.classList.remove('opacity-50');
                    } else {
                        indicator.classList.add('opacity-50');
                        indicator.classList.remove('opacity-100');
                    }
                });
                currentIndex = index;
            }
            // 下一张幻灯片
            function nextSlide() {
                currentIndex = (currentIndex + 1) % slides.length;
                goToSlide(currentIndex);
            }
            // 指示器点击事件
            indicators.forEach(function (indicator, index) {
                indicator.addEventListener('click', function () {
                    goToSlide(index);
                    resetSlideInterval();
                });
            });
            // 重置轮播定时器
            function resetSlideInterval() {
                clearInterval(slideInterval);
                slideInterval = setInterval(nextSlide, 5000);
            }
            // 初始化轮播宽度
            setSlideWidth();

            // 窗口大小改变时重新设置轮播宽度
            window.addEventListener('resize', setSlideWidth);

            // 自动轮播
            resetSlideInterval();

            // 触摸滑动支持
            var startX, endX;
            carousel.addEventListener('touchstart', function (e) {
                startX = e.touches[0].clientX;
                clearInterval(slideInterval);
            }, false);
            carousel.addEventListener('touchend', function (e) {
                endX = e.changedTouches[0].clientX;
                handleSwipe();
                resetSlideInterval();
            }, false);
            function handleSwipe() {
                var threshold = 50;
                if (endX - startX > threshold) {
                    // 向左滑动
                    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
                    goToSlide(currentIndex);
                } else if (startX - endX > threshold) {
                    // 向右滑动
                    nextSlide();
                }
            }
        }
        // 头部滚动效果
        function initHeaderScroll() {
            var header = document.getElementById('header');
            var lastScrollTop = 0;
            window.addEventListener('scroll', function () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                if (scrollTop > 50) {
                    header.classList.add('py-2', 'shadow');
                    header.classList.remove('py-3');
                } else {
                    header.classList.add('py-3');
                    header.classList.remove('py-2', 'shadow');
                }
                lastScrollTop = scrollTop;
            });
        }
        // 限时特惠计时器
        function initFlashSaleTimer() {
            // 模拟倒计时，实际应用中应该从服务器获取结束时间
            function updateTimer() {
                var hoursEl = document.querySelector('#flash-sale-container .min-w\\[80px\\]:nth-child(1) div:first-child');
                var minutesEl = document.querySelector('#flash-sale-container .min-w\\[80px\\]:nth-child(3) div:first-child');
                var secondsEl = document.querySelector('#flash-sale-container .min-w\\[80px\\]:nth-child(5) div:first-child');
                var hours = parseInt(hoursEl.textContent);
                var minutes = parseInt(minutesEl.textContent);
                var seconds = parseInt(secondsEl.textContent);
                seconds--;
                if (seconds < 0) {
                    seconds = 59;
                    minutes--;
                    if (minutes < 0) {
                        minutes = 59;
                        hours--;
                        if (hours < 0) {
                            hours = 23;
                        }
                    }
                }

                // 格式化数字为两位数
                hoursEl.textContent = hours.toString().padStart(2, '0');
                minutesEl.textContent = minutes.toString().padStart(2, '0');
                secondsEl.textContent = seconds.toString().padStart(2, '0');
            }

            // 每秒更新一次计时器
            setInterval(updateTimer, 1000);
        }
    </script>
</body>

</html>